<template>
  <a-row type="flex" justify="center">
    <a-col :span="22">
      <a-card title="资源公共池">
        <template slot="extra">
          <a-button size="small" type="primary" icon="plus" @click="onAdd">手动添加客户</a-button>
        </template>
        <div class="table-page-search-wrapper">
          <a-form-model
            layout="inline"
            :model="queryParam"
          >
            <a-row :gutter="15">
              <a-col :md="6" :sm="24">
                <a-form-model-item label="所属公司">
                  <a-select v-model="queryParam['filter[company]']" defaultValue="all">
                    <a-select-option v-for="(item,index) in companyOpts2" :key="index" :value="index">
                      {{item}}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-model-item label="联系电话">
                  <a-input v-model="queryParam['filter[phone]']"/>
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-model-item label="业务名称">
                  <a-input v-model="queryParam['filter[b_name]']"/>
                </a-form-model-item>
              </a-col>
              <template v-if="advanced">
                <a-col :md="6" :sm="24">
                  <a-form-item label="入库时间">
                    <a-range-picker @change="onTime1" />
                  </a-form-item>
                </a-col>
                <a-col :md="6" :sm="24">
                  <a-form-item label="领取时间">
                    <a-range-picker @change="onTime2" />
                  </a-form-item>
                </a-col>
                <a-col :md="6" :sm="24">
                  <a-form-model-item label="业务分类">
                    <a-select v-model="queryParam['filter[first_type]']" :default-value="0">
                      <a-select-option v-for="(item,index) in firstTypeOpts" :key="index" :value="index">
                        {{item}}
                      </a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>
                <a-col :md="6" :sm="24">
                  <a-form-model-item label="搜索引擎">
                    <a-input v-model="queryParam['filter[search_engine]']"/>
                  </a-form-model-item>
                </a-col>
                <a-col :md="6" :sm="24">
                  <a-form-model-item label="首次页面">
                    <a-input v-model="queryParam['filter[first_url]']"/>
                  </a-form-model-item>
                </a-col>
                <a-col :md="6" :sm="24">
                  <a-form-model-item label="领取状态">
                    <a-select v-model="queryParam['filter[receive_status]']" :default-value="0">
                      <a-select-option v-for="(item,index) in receiveStatusOpts" :key="index" :value="index">
                        {{item}}
                      </a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>
                <a-col :md="6" :sm="24">
                  <a-form-model-item label="按搜索词">
                    <a-input v-model="queryParam['filter[search_keywords]']"/>
                  </a-form-model-item>
                </a-col>
                <a-col :md="6" :sm="24">
                  <a-form-model-item label="领取顾问">
                    <a-input v-model="queryParam['filter[receiver_info]']"/>
                  </a-form-model-item>
                </a-col>
                <a-col :md="6" :sm="24">
                  <a-form-item label="搜索的IP">
                    <a-input v-model="queryParam['filter[ip]']"/>
                  </a-form-item>
                </a-col>
                <a-col :md="6" :sm="24">
                  <a-form-model-item label="放弃状态">
                    <a-select v-model="queryParam['filter[is_abandon]']" :default-value="0">
                      <a-select-option v-for="(item,index) in abandonStatusOpts" :key="index" :value="index">
                        {{item}}
                      </a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>
                <a-col :md="6" :sm="24">
                  <a-form-model-item label="客户状态">
                    <a-select v-model="queryParam['filter[customer_status]']" :default-value="0">
                      <a-select-option v-for="item in customerStatusOpts" :key="item.id" :value="item.id">
                        {{item.title}}
                      </a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>
              </template>
              <a-col :md="!advanced && 8 || 24" :sm="24">
                  <span class='table-page-search-submitButtons' :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                    <a-button type="primary" @click="$refs.table.refresh(true)">搜索</a-button>
                    <a-button style="margin-left: 8px" @click="resetForm">重置</a-button>
                    <a @click="toggleAdvanced" style="margin-left: 8px">
                      {{ advanced ? '收起' : '展开' }}
                      <a-icon :type="advanced ? 'up' : 'down'" />
                    </a>
                  </span>
              </a-col>
            </a-row>
          </a-form-model>
        </div>
<!--        <a-button :hidden="true" :disabled="selectedRowKeys.length == 0" type="danger" @click="onDelete(selectedRowKeys)">批量删除</a-button>-->
<!--        <a-button :hidden="true" style="margin-left: 8px" :disabled="selectedRowKeys.length == 0" type="danger" @click="batchTransfer(selectedRowKeys)">批量转移</a-button>-->
        <a-button style="margin-left: 8px" type='primary' @click='exportData'>导出</a-button>
        <p></p>
        <s-table
          bordered
          ref="table"
          :row-key="(record) => record.customer_id"
          :columns="customerColumns"
          :data="customerData"
        >
          <template slot="company" slot-scope="text">
            {{ companyOpts2[text] }}
          </template>
          <template slot='ip' slot-scope='text,record'>
            {{record.device}}<br>{{text}}<br>{{record.ip_format}}
          </template>
          <template slot="search_keywords" slot-scope="text,record">
            <div>{{text}}</div>
            <div>{{record.search_engine}}</div>
          </template>
          <template slot='first_url' slot-scope='text'>
            <a :href='text' target='_blank'>{{text}}</a>
          </template>
          <template slot="scrr_username" slot-scope="text,record">
            {{text}}<br>
            {{record.first_received_at}}
          </template>
          <template slot='action' slot-scope='text,record'>
            <a-button type='primary' size='small' style="margin-right:5px" :disabled="record.transfer == 0" @click="onTransfer(record.customer_id)">转移</a-button>
            <a-button type='danger' size='small' @click="onDelete(record.customer_id)">删除</a-button>
          </template>
        </s-table>
      </a-card>
      <a-modal
        title="指派数据"
        v-model="visible"
        :width="500"
        :confirm-loading="loading"
        @ok="onSubmitTransfer"
      >
        <a-alert
          message="警告"
          description="所转移的信息将直接进入目标库"
          type="warning"
          show-icon
        />
        <p></p>
        <a-select
          show-search
          v-model="transferForm['transfer[to_company]']"
          :filter-option="filterOption"
          style="width: 100%"
          placeholder="请选择要转移的公司"
        >
          <a-select-option v-for="(item,index) in companyOpts" :key="index" :value="index">{{item}}</a-select-option>
        </a-select>
      </a-modal>
      <a-modal
        title="完善客户信息"
        v-model="visible2"
        :confirm-loading="loading4"
        @ok="onSubmitAdd"
      >
        <a-form-model
          ref="customerForm"
          :model="customerForm"
          :rules="customerRules"
        >
          <a-form-model-item label="首次页面" prop="first_url">
            <a-input type="text" v-model="customerForm.first_url" />
          </a-form-model-item>
          <a-form-model-item label="来源" prop="source">
            <a-select placeholder="选择客户来源" v-model="customerForm.source">
              <a-select-option v-for="(item,index) in sourceOpts" :key="index" :value="index">{{item}}</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="公司名称/姓名" prop="first_name">
            <a-input placeholder="填写公司名称/姓名" v-model="customerForm.first_name" type="text" />
          </a-form-model-item>
          <a-form-model-item label="专利名称" prop="pt_name">
            <a-input placeholder="填写专利名称" v-model="customerForm.pt_name" type="text" />
          </a-form-model-item>
          <a-form-model-item label="联系电话" prop="phone">
            <a-input placeholder="填写联系电话" v-model="customerForm.phone" type="text" />
          </a-form-model-item>
          <a-form-model-item label="客户状态" prop="customer_status">
            <a-select placeholder="选择客户状态" v-model="customerForm.customer_status">
              <a-select-option v-for="(item,index) in statusOpts" :key="index" :value="index">{{item}}</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="首次咨询类型" prop="first_type">
            <a-select placeholder="选择首次咨询类型" v-model="customerForm.first_type">
              <a-select-option v-for="(item,index) in typeOpts" :key="index" :value="index">{{item}}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </a-col>
  </a-row>
</template>

<script>
  import storage from 'store'
  import { COMPANY, ACCESS_TOKEN } from '@/store/mutation-types'
  import { STable } from '@/components'
  import col from '@/columns/customer'
  import apis from '@/api'
  import {
    allList2,
    delList,
    getAddCustomer,
    getTransfer,
    postAddCustomer,
    postTransfer
  } from '@/api/customer'
  export default {
    components: {
      STable
    },
    name: 'CustomerList',
    data () {
      return {
        customerColumns: col.all_list3,
        customerData: parameters => {
          return allList2(Object.assign(parameters, this.queryParam)).then(res => {
            this.companyOpts2 = res.result.company_opts
            this.customerStatusOpts = res.result.customer_status_opts
            this.abandonStatusOpts = res.result.is_abandon_opts
            this.receiveStatusOpts = res.result.receive_status_opts
            this.firstTypeOpts = res.result.first_type_opts
            return res.result
          })
        },
        queryParam: {},
        loading: false,
        loading1: false,
        loading2: false,
        loading3: false,
        advanced: true,
        companyOpts2: {},
        customerStatusOpts: {},
        abandonStatusOpts: {},
        receiveStatusOpts: {},
        firstTypeOpts: {},
        // selectedRowKeys: [],
        exportUrl: apis.ExportData2,
        exportParams: '',
        company: storage.get(COMPANY),
        acesstoken: storage.get(ACCESS_TOKEN),
        transferForm: {},
        ids: [],
        visible: false,
        companyOpts: {},
        badForm: {},
        customerForm: {},
        customerRules: {
          first_url: [{ required: true, message: '必须填写首次页面地址', trigger: 'blur' }],
          pt_name: [{ required: true, message: '必须填写专利名称', trigger: 'blur' }],
          customer_status: [{ required: true, message: '必须选择客户状态', trigger: 'change' }],
          source: [{ required: true, message: '必须选择客户来源', trigger: 'change' }],
          first_name: [{ required: true, message: '必须填写公司名称/姓名', trigger: 'blur' }],
          phone: [{ required: true, message: '必须填写联系电话', trigger: 'blur' }],
          first_type: [{ required: true, message: '必须选择首次咨询类型', trigger: 'change' }]
        },
        statusOpts: {},
        intOpts: {},
        sourceOpts: {},
        typeOpts: {},
        visible2: false,
        loading4: false
      }
    },
    created () {
      // this.getBadClick()
    },
    methods: {
      onAdd () {
        const app = this
        getAddCustomer().then(res => {
          if (res.status === 0) {
            app.statusOpts = res.result.customer_status_opts
            app.sourceOpts = res.result.source_opts
            // app.intOpts = res.result.intention_opts
            app.typeOpts = res.result.type_opts
            app.visible2 = true
          }
        })
      },
      toggleAdvanced () {
        this.advanced = !this.advanced
      },
      onTime1 (date, dateString) {
        this.queryParam['filter[created_at_start]'] = dateString[0]
        this.queryParam['filter[created_at_end]'] = dateString[1]
      },
      onTime2 (date, dateString) {
        this.queryParam['filter[received_at_start]'] = dateString[0]
        this.queryParam['filter[received_at_end]'] = dateString[1]
      },
      onDelete (ids) {
        const app = this
        app.$confirm({
          title: '确定删除数据吗',
          onOk: () => {
            const parameter = {}
            parameter['ids'] = ids
            delList(parameter).then(res => {
              if (res.status === 0) {
                app.$refs.table.refresh(true)
              } else {
                this.$warning({
                  title: res.msg
                })
              }
            })
          }
        })
      },
      resetForm () {
        // this.reload()
        const app = this
        app.queryParam = {}
        app.$refs.table.refresh(true)
      },
      exportData () {
        const app = this
        for (const k in app.queryParam) {
          app.exportParams = app.exportParams + ('&' + k + '=' + app.queryParam[k])
        }
        app.exportUrl = app.exportUrl + '?access_token=' + app.acesstoken + '&company=' + app.company + app.exportParams
        app.$confirm({
          title: '是否导出所筛选的数据',
          onOk: () => {
            window.open(process.env.VUE_APP_API_BASE_URL + app.exportUrl)
          }
        })
      },
      batchTransfer (ids) {
        const app = this
        app.ids = ids
        getTransfer().then(res => {
          if (res.status === 0) {
            app.companyOpts = res.result.companies
            app.visible = true
          } else {
            app.$warning({
              title: res.msg
            })
          }
        })
      },
      onTransfer (id) {
        const app = this
        this.ids[0] = id
        getTransfer().then(res => {
          if (res.status === 0) {
            app.companyOpts = res.result.companies
            app.visible = true
          } else {
            app.$warning({
              title: res.msg
            })
          }
        })
      },
      onSubmitTransfer () {
        const app = this
        app.transferForm['transfer[customer_ids]'] = app.ids
        postTransfer(app.transferForm).then(res => {
          if (res.status === 0) {
            app.visible = false
            app.$refs.table.refresh(true)
          } else {
            app.$warning({
              title: res.msg
            })
          }
        })
      },
      filterOption (input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        )
      },
      onSubmitAdd () {
        const app = this
        const data = {}
        app.$refs.customerForm.validate(valid => {
          if (valid) {
            app.loading4 = true
            for (const k in app.customerForm) {
              data['customer[' + k + ']'] = app.customerForm[k]
            }
            postAddCustomer(data).then(res => {
              if (res.status === 0) {
                app.$refs.table.refresh(true)
                app.visible2 = false
              } else {
                app.$warning({
                  title: res.msg
                })
                return false
              }
            }).finally(() => {
              app.loading4 = false
            })
          } else {
            return false
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>
